<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>约会列表 - 社交平台</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #2563eb;
            --primary-light: #60a5fa;
            --primary-dark: #1d4ed8;
            --secondary: #f97316;
            --success: #10b981;
            --danger: #ef4444;
            --light-bg: #f8fafc;
            --card-bg: #ffffff;
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --border-color: #e2e8f0;
            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
            --transition: all 0.2s ease;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--light-bg);
            color: var(--text-primary);
            padding-top: 56px;
            padding-bottom: 65px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: var(--card-bg);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            border-bottom: 1px solid var(--border-color);
            z-index: 1000;
        }
        
        .nav-title {
            font-size: 1.1rem;
            font-weight: 600;
        }
        
        .nav-btn {
            background: none;
            border: none;
            color: var(--text-secondary);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }
        
        .nav-btn:hover {
            background-color: var(--light-bg);
            color: var(--primary);
        }
        
        /* 筛选区域 */
        .filter-bar {
            background-color: var(--card-bg);
            padding: 12px 16px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            gap: 8px;
            overflow-x: auto;
            scrollbar-width: none;
        }
        
        .filter-bar::-webkit-scrollbar {
            display: none;
        }
        
        .filter-item {
            flex: 0 0 auto;
            padding: 6px 14px;
            background-color: var(--light-bg);
            border-radius: 16px;
            font-size: 0.85rem;
            color: var(--text-secondary);
            cursor: pointer;
            transition: var(--transition);
        }
        
        .filter-item.active {
            background-color: var(--primary);
            color: white;
        }
        
        .search-box {
            padding: 12px 16px;
            background-color: var(--card-bg);
            border-bottom: 1px solid var(--border-color);
        }
        
        .search-input {
            width: 100%;
            padding: 10px 16px 10px 40px;
            border-radius: 24px;
            border: 1px solid var(--border-color);
            background-color: var(--light-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") no-repeat 14px center;
            font-size: 0.9rem;
        }
        
        .search-input:focus {
            outline: none;
            border-color: var(--primary-light);
        }
        
        /* 视图切换 */
        .view-toggle {
            display: flex;
            background-color: var(--card-bg);
            border-bottom: 1px solid var(--border-color);
        }
        
        .view-btn {
            flex: 1;
            padding: 12px;
            border: none;
            background: none;
            font-size: 0.9rem;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            position: relative;
        }
        
        .view-btn.active {
            color: var(--primary);
        }
        
        .view-btn.active::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            right: 0;
            height: 2px;
            background-color: var(--primary);
        }
        
        /* 列表容器 */
        .date-list {
            padding: 12px;
            display: none;
        }
        
        .date-list.active {
            display: block;
        }
        
        /* 1. 卡片式列表 */
        .card-list .date-item {
            background-color: var(--card-bg);
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 12px;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }
        
        .card-list .date-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.1);
        }
        
        .card-list .date-images {
            position: relative;
            height: 180px;
        }
        
        .card-list .no-image {
            height: 180px;
            background-color: var(--light-bg);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--primary-light);
            text-align: center;
            padding: 20px;
        }
        
        .card-list .no-image i {
            font-size: 2.5rem;
            margin-bottom: 8px;
        }
        
        .card-list .image-slider {
            width: 100%;
            height: 100%;
            position: relative;
        }
        
        .card-list .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .card-list .slide.active {
            opacity: 1;
        }
        
        .card-list .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .card-list .image-count {
            position: absolute;
            bottom: 8px;
            right: 8px;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.8rem;
        }
        
        .card-list .date-info {
            padding: 16px;
        }
        
        .card-list .date-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 8px;
        }
        
        .card-list .date-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 12px;
            font-size: 0.85rem;
            color: var(--text-secondary);
        }
        
        .card-list .meta-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .card-list .date-description {
            color: var(--text-secondary);
            font-size: 0.9rem;
            line-height: 1.4;
            margin-bottom: 12px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .card-list .tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 12px;
        }
        
        .card-list .tag {
            padding: 3px 10px;
            background-color: rgba(37, 99, 235, 0.1);
            color: var(--primary);
            border-radius: 12px;
            font-size: 0.75rem;
        }
        
        .card-list .host-info {
            display: flex;
            align-items: center;
            gap: 10px;
            padding-top: 12px;
            border-top: 1px solid var(--border-color);
        }
        
        .card-list .host-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .card-list .host-name {
            font-weight: 500;
            font-size: 0.9rem;
        }
        
        /* 2. 简约列表 */
        .simple-list .date-item {
            background-color: var(--card-bg);
            border-radius: 12px;
            margin-bottom: 12px;
            box-shadow: var(--shadow);
            display: flex;
            overflow: hidden;
            transition: var(--transition);
        }
        
        .simple-list .date-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.1);
        }
        
        .simple-list .date-image-container {
            width: 100px;
            flex-shrink: 0;
            position: relative;
        }
        
        .simple-list .date-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .simple-list .no-image {
            width: 100%;
            height: 100%;
            background-color: var(--light-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-light);
        }
        
        .simple-list .image-count {
            position: absolute;
            bottom: 4px;
            right: 4px;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 1px 6px;
            border-radius: 8px;
            font-size: 0.7rem;
        }
        
        .simple-list .date-details {
            flex: 1;
            padding: 12px;
            min-width: 0;
        }
        
        .simple-list .date-title {
            font-weight: 600;
            font-size: 0.95rem;
            margin-bottom: 6px;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .simple-list .date-meta {
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin-bottom: 4px;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .simple-list .tag {
            display: inline-block;
            padding: 2px 6px;
            background-color: rgba(37, 99, 235, 0.1);
            color: var(--primary);
            border-radius: 8px;
            font-size: 0.7rem;
            margin-right: 4px;
        }
        
        /* 3. 网格列表 */
        .grid-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
        
        .grid-list .date-item {
            background-color: var(--card-bg);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }
        
        .grid-list .date-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.1);
        }
        
        .grid-list .date-image-container {
            position: relative;
            padding-top: 100%;
        }
        
        .grid-list .date-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .grid-list .no-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--light-bg);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--primary-light);
            text-align: center;
            padding: 10px;
        }
        
        .grid-list .no-image i {
            font-size: 1.5rem;
            margin-bottom: 4px;
        }
        
        .grid-list .image-count {
            position: absolute;
            bottom: 4px;
            right: 4px;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 1px 6px;
            border-radius: 8px;
            font-size: 0.7rem;
        }
        
        .grid-list .date-info {
            padding: 10px;
        }
        
        .grid-list .date-title {
            font-weight: 600;
            font-size: 0.85rem;
            margin-bottom: 6px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .grid-list .date-meta {
            font-size: 0.75rem;
            color: var(--text-secondary);
            margin-bottom: 6px;
        }
        
        .grid-list .tag {
            display: inline-block;
            padding: 2px 6px;
            background-color: rgba(37, 99, 235, 0.1);
            color: var(--primary);
            border-radius: 8px;
            font-size: 0.7rem;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 65px;
            background-color: var(--card-bg);
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--border-color);
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: var(--text-secondary);
            font-size: 0.7rem;
            text-decoration: none;
        }
        
        .nav-item i {
            font-size: 1.25rem;
            margin-bottom: 4px;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        /* 加载更多 */
        .load-more {
            width: 100%;
            padding: 12px;
            background: none;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            color: var(--text-secondary);
            font-size: 0.9rem;
            margin: 16px 0;
            transition: var(--transition);
        }
        
        .load-more:hover {
            background-color: var(--light-bg);
            color: var(--primary);
        }
        
        /* 空状态 */
        .empty-state {
            padding: 80px 20px;
            text-align: center;
            color: var(--text-secondary);
        }
        
        .empty-state i {
            font-size: 4rem;
            margin-bottom: 16px;
            color: var(--border-color);
        }
        
        /* 图片预览模态框 */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.9);
            z-index: 2000;
            display: none;
            align-items: center;
            justify-content: center;
        }
        
        .modal.show {
            display: flex;
        }
        
        .modal-content {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .modal-image {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        
        .modal-close {
            position: absolute;
            top: 16px;
            right: 16px;
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .modal-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: white;
            font-size: 2rem;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(0, 0, 0, 0.3);
        }
        
        .modal-prev {
            left: 16px;
        }
        
        .modal-next {
            right: 16px;
        }
        
        /* 提示消息 */
        .toast {
            position: fixed;
            top: 60px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 16px;
            border-radius: 4px;
            font-size: 0.9rem;
            z-index: 9999;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .toast.show {
            opacity: 1;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">发现约会</div>
        <button class="nav-btn" id="createBtn">
            <i class="fas fa-plus"></i>
        </button>
    </div>
    
    <!-- 搜索框 -->
    <div class="search-box">
        <input type="text" class="search-input" placeholder="搜索约会、活动或标签...">
    </div>
    
    <!-- 筛选栏 -->
    <div class="filter-bar">
        <div class="filter-item active" data-filter="all">全部</div>
        <div class="filter-item" data-filter="food">美食聚餐</div>
        <div class="filter-item" data-filter="movie">电影观影</div>
        <div class="filter-item" data-filter="sports">运动健身</div>
        <div class="filter-item" data-filter="culture">文化艺术</div>
        <div class="filter-item" data-filter="outdoor">户外活动</div>
        <div class="filter-item" data-filter="online">线上活动</div>
    </div>
    
    <!-- 视图切换 -->
    <div class="view-toggle">
        <button class="view-btn active" data-view="card-list">
            <i class="fas fa-th-large"></i>
            <span>卡片</span>
        </button>
        <button class="view-btn" data-view="simple-list">
            <i class="fas fa-list"></i>
            <span>列表</span>
        </button>
        <button class="view-btn" data-view="grid-list">
            <i class="fas fa-th"></i>
            <span>网格</span>
        </button>
    </div>
    
    <!-- 1. 卡片式列表 -->
    <div class="date-list active" id="card-list">
        <!-- 多图约会 -->
        <div class="date-item" data-category="food">
            <div class="date-images">
                <div class="image-slider">
                    <div class="slide active">
                        <img src="https://picsum.photos/id/292/800/600" alt="美食约会">
                    </div>
                    <div class="slide">
                        <img src="https://picsum.photos/id/431/800/600" alt="餐厅环境">
                    </div>
                    <div class="slide">
                        <img src="https://picsum.photos/id/365/800/600" alt="特色菜品">
                    </div>
                </div>
                <div class="image-count">1/3</div>
            </div>
            
            <div class="date-info">
                <h3 class="date-title">周末日式料理品鉴会</h3>
                
                <div class="date-meta">
                    <div class="meta-item">
                        <i class="far fa-calendar-alt"></i>
                        <span>周六 18:30</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>朝阳区</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-users"></i>
                        <span>4/8人</span>
                    </div>
                </div>
                
                <p class="date-description">
                    一起探索新开的日式料理店，品尝正宗寿司和刺身，店内环境优雅，适合拍照打卡。
                </p>
                
                <div class="tags">
                    <span class="tag">美食聚餐</span>
                    <span class="tag">日式料理</span>
                    <span class="tag">新朋友</span>
                </div>
                
                <div class="host-info">
                    <img src="https://picsum.photos/id/64/100/100" alt="发起人头像" class="host-avatar">
                    <span class="host-name">美食探险家</span>
                </div>
            </div>
        </div>
        
        <!-- 单图约会 -->
        <div class="date-item" data-category="movie">
            <div class="date-images">
                <div class="image-slider">
                    <div class="slide active">
                        <img src="https://picsum.photos/id/96/800/600" alt="电影海报">
                    </div>
                </div>
                <div class="image-count">1/1</div>
            </div>
            
            <div class="date-info">
                <h3 class="date-title">新片《星际探索》观影会</h3>
                
                <div class="date-meta">
                    <div class="meta-item">
                        <i class="far fa-calendar-alt"></i>
                        <span>周日 15:00</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>海淀区</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-users"></i>
                        <span>2/10人</span>
                    </div>
                </div>
                
                <p class="date-description">
                    一起观看最新科幻大片，结束后可以在商场咖啡厅讨论剧情，认识同样喜欢科幻的朋友。
                </p>
                
                <div class="tags">
                    <span class="tag">电影观影</span>
                    <span class="tag">科幻</span>
                    <span class="tag">轻松</span>
                </div>
                
                <div class="host-info">
                    <img src="https://picsum.photos/id/91/100/100" alt="发起人头像" class="host-avatar">
                    <span class="host-name">科幻迷</span>
                </div>
            </div>
        </div>
        
        <!-- 无图约会 -->
        <div class="date-item" data-category="sports">
            <div class="no-image">
                <i class="fas fa-basketball-ball"></i>
                <div>周末篮球友谊赛</div>
            </div>
            
            <div class="date-info">
                <h3 class="date-title">周末篮球友谊赛</h3>
                
                <div class="date-meta">
                    <div class="meta-item">
                        <i class="far fa-calendar-alt"></i>
                        <span>周六 09:00</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>东城区</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-users"></i>
                        <span>6/12人</span>
                    </div>
                </div>
                
                <p class="date-description">
                    组织一场篮球友谊赛，水平不限，以球会友，打完球可以一起聚餐聊天，新手也欢迎参加。
                </p>
                
                <div class="tags">
                    <span class="tag">运动健身</span>
                    <span class="tag">篮球</span>
                    <span class="tag">团队</span>
                </div>
                
                <div class="host-info">
                    <img src="https://picsum.photos/id/65/100/100" alt="发起人头像" class="host-avatar">
                    <span class="host-name">篮球达人</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 2. 简约列表 -->
    <div class="date-list" id="simple-list">
        <!-- 多图约会 -->
        <div class="date-item" data-category="food">
            <div class="date-image-container">
                <img src="https://picsum.photos/id/292/300/300" alt="美食约会" class="date-image">
                <div class="image-count">3图</div>
            </div>
            <div class="date-details">
                <h3 class="date-title">周末日式料理品鉴会</h3>
                <div class="date-meta">
                    <i class="far fa-calendar-alt"></i> 周六 18:30 · 
                    <i class="fas fa-map-marker-alt"></i> 朝阳区
                </div>
                <div>
                    <span class="tag">美食聚餐</span>
                    <span class="tag">日式料理</span>
                </div>
            </div>
        </div>
        
        <!-- 单图约会 -->
        <div class="date-item" data-category="movie">
            <div class="date-image-container">
                <img src="https://picsum.photos/id/96/300/300" alt="电影海报" class="date-image">
                <div class="image-count">1图</div>
            </div>
            <div class="date-details">
                <h3 class="date-title">新片《星际探索》观影会</h3>
                <div class="date-meta">
                    <i class="far fa-calendar-alt"></i> 周日 15:00 · 
                    <i class="fas fa-map-marker-alt"></i> 海淀区
                </div>
                <div>
                    <span class="tag">电影观影</span>
                    <span class="tag">科幻</span>
                </div>
            </div>
        </div>
        
        <!-- 无图约会 -->
        <div class="date-item" data-category="sports">
            <div class="date-image-container">
                <div class="no-image">
                    <i class="fas fa-basketball-ball"></i>
                </div>
            </div>
            <div class="date-details">
                <h3 class="date-title">周末篮球友谊赛</h3>
                <div class="date-meta">
                    <i class="far fa-calendar-alt"></i> 周六 09:00 · 
                    <i class="fas fa-map-marker-alt"></i> 东城区
                </div>
                <div>
                    <span class="tag">运动健身</span>
                    <span class="tag">篮球</span>
                </div>
            </div>
        </div>
        
        <!-- 多图约会 -->
        <div class="date-item" data-category="culture">
            <div class="date-image-container">
                <img src="https://picsum.photos/id/42/300/300" alt="艺术展" class="date-image">
                <div class="image-count">2图</div>
            </div>
            <div class="date-details">
                <h3 class="date-title">现代艺术展参观</h3>
                <div class="date-meta">
                    <i class="far fa-calendar-alt"></i> 周五 14:00 · 
                    <i class="fas fa-map-marker-alt"></i> 西城区
                </div>
                <div>
                    <span class="tag">文化艺术</span>
                    <span class="tag">展览</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 3. 网格列表 -->
    <div class="date-list" id="grid-list">
        <!-- 多图约会 -->
        <div class="date-item" data-category="food">
            <div class="date-image-container">
                <img src="https://picsum.photos/id/292/300/300" alt="美食约会" class="date-image">
                <div class="image-count">3图</div>
            </div>
            <div class="date-info">
                <h3 class="date-title">周末日式料理品鉴会</h3>
                <div class="date-meta">
                    <i class="far fa-calendar-alt"></i> 周六 18:30
                </div>
                <span class="tag">美食聚餐</span>
            </div>
        </div>
        
        <!-- 单图约会 -->
        <div class="date-item" data-category="movie">
            <div class="date-image-container">
                <img src="https://picsum.photos/id/96/300/300" alt="电影海报" class="date-image">
                <div class="image-count">1图</div>
            </div>
            <div class="date-info">
                <h3 class="date-title">新片《星际探索》观影会</h3>
                <div class="date-meta">
                    <i class="far fa-calendar-alt"></i> 周日 15:00
                </div>
                <span class="tag">电影观影</span>
            </div>
        </div>
        
        <!-- 无图约会 -->
        <div class="date-item" data-category="sports">
            <div class="date-image-container">
                <div class="no-image">
                    <i class="fas fa-basketball-ball"></i>
                    <div>篮球</div>
                </div>
            </div>
            <div class="date-info">
                <h3 class="date-title">周末篮球友谊赛</h3>
                <div class="date-meta">
                    <i class="far fa-calendar-alt"></i> 周六 09:00
                </div>
                <span class="tag">运动健身</span>
            </div>
        </div>
        
        <!-- 多图约会 -->
        <div class="date-item" data-category="culture">
            <div class="date-image-container">
                <img src="https://picsum.photos/id/42/300/300" alt="艺术展" class="date-image">
                <div class="image-count">2图</div>
            </div>
            <div class="date-info">
                <h3 class="date-title">现代艺术展参观</h3>
                <div class="date-meta">
                    <i class="far fa-calendar-alt"></i> 周五 14:00
                </div>
                <span class="tag">文化艺术</span>
            </div>
        </div>
    </div>
    
    <!-- 加载更多 -->
    <button class="load-more" id="loadMoreBtn">加载更多约会</button>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-calendar-alt"></i>
            <span>约会</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-compass"></i>
            <span>发现</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-comment"></i>
            <span>消息</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- 图片预览模态框 -->
    <div class="modal" id="imageModal">
        <div class="modal-content">
            <button class="modal-close" id="modalCloseBtn">&times;</button>
            <button class="modal-nav modal-prev" id="prevImageBtn">
                <i class="fas fa-chevron-left"></i>
            </button>
            <img src="" alt="图片预览" class="modal-image" id="modalImage">
            <button class="modal-nav modal-next" id="nextImageBtn">
                <i class="fas fa-chevron-right"></i>
            </button>
        </div>
    </div>
    
    <!-- 提示消息 -->
    <div class="toast" id="toastMessage"></div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // DOM元素
        const backBtn = document.getElementById('backBtn');
        const createBtn = document.getElementById('createBtn');
        const viewBtns = document.querySelectorAll('.view-btn');
        const dateLists = document.querySelectorAll('.date-list');
        const filterItems = document.querySelectorAll('.filter-item');
        const loadMoreBtn = document.getElementById('loadMoreBtn');
        const searchInput = document.querySelector('.search-input');
        const imageModal = document.getElementById('imageModal');
        const modalImage = document.getElementById('modalImage');
        const modalCloseBtn = document.getElementById('modalCloseBtn');
        const prevImageBtn = document.getElementById('prevImageBtn');
        const nextImageBtn = document.getElementById('nextImageBtn');
        const toastMessage = document.getElementById('toastMessage');
        
        // 图片数据 - 实际项目中可从API获取
        const dateImages = {
            food: [
                'https://picsum.photos/id/292/800/600',
                'https://picsum.photos/id/431/800/600',
                'https://picsum.photos/id/365/800/600'
            ],
            movie: [
                'https://picsum.photos/id/96/800/600'
            ],
            culture: [
                'https://picsum.photos/id/42/800/600',
                'https://picsum.photos/id/65/800/600'
            ]
        };
        
        let currentImageSet = [];
        let currentImageIndex = 0;
        
        // 初始化
        function init() {
            setupEventListeners();
            initImageSliders();
        }
        
        // 设置事件监听
        function setupEventListeners() {
            // 返回按钮
            backBtn.addEventListener('click', () => {
                history.back();
                showToast('返回上一页');
            });
            
            // 创建约会按钮
            createBtn.addEventListener('click', () => {
                showToast('创建新约会');
            });
            
            // 视图切换
            viewBtns.forEach(btn => {
                btn.addEventListener('click', () => {
                    const viewType = btn.getAttribute('data-view');
                    
                    // 更新按钮状态
                    viewBtns.forEach(b => b.classList.remove('active'));
                    btn.classList.add('active');
                    
                    // 更新列表显示
                    dateLists.forEach(list => {
                        list.classList.remove('active');
                    });
                    document.getElementById(viewType).classList.add('active');
                });
            });
            
            // 筛选功能
            filterItems.forEach(item => {
                item.addEventListener('click', () => {
                    const filterType = item.getAttribute('data-filter');
                    
                    // 更新筛选按钮状态
                    filterItems.forEach(i => i.classList.remove('active'));
                    item.classList.add('active');
                    
                    // 筛选约会项目
                    filterDates(filterType);
                });
            });
            
            // 加载更多
            loadMoreBtn.addEventListener('click', () => {
                loadMoreBtn.textContent = '加载中...';
                setTimeout(() => {
                    loadMoreBtn.textContent = '没有更多约会了';
                    loadMoreBtn.disabled = true;
                    loadMoreBtn.style.opacity = '0.7';
                }, 1500);
            });
            
            // 搜索功能
            searchInput.addEventListener('input', debounce(function() {
                const searchTerm = this.value.trim().toLowerCase();
                searchDates(searchTerm);
            }, 300));
            
            // 图片点击查看
            document.querySelectorAll('.date-images, .date-image-container img').forEach(el => {
                el.addEventListener('click', openImageViewer);
            });
            
            // 图片模态框控制
            modalCloseBtn.addEventListener('click', closeImageViewer);
            prevImageBtn.addEventListener('click', showPrevImage);
            nextImageBtn.addEventListener('click', showNextImage);
            
            // 点击模态框背景关闭
            imageModal.addEventListener('click', (e) => {
                if (e.target === imageModal) {
                    closeImageViewer();
                }
            });
            
            // 约会项目点击
            document.querySelectorAll('.date-item').forEach(item => {
                item.addEventListener('click', (e) => {
                    // 避免图片点击触发详情页
                    if (!e.target.closest('.date-images, .date-image-container, .slide, img')) {
                        const title = item.querySelector('.date-title').textContent;
                        showToast(`查看「${title}」详情`);
                    }
                });
            });
        }
        
        // 初始化图片轮播
        function initImageSliders() {
            document.querySelectorAll('.image-slider').forEach(slider => {
                let currentSlide = 0;
                const slides = slider.querySelectorAll('.slide');
                const slideCount = slides.length;
                const imageCountEl = slider.parentElement.querySelector('.image-count');
                
                // 自动轮播
                setInterval(() => {
                    slides[currentSlide].classList.remove('active');
                    currentSlide = (currentSlide + 1) % slideCount;
                    slides[currentSlide].classList.add('active');
                    
                    // 更新图片计数
                    if (imageCountEl) {
                        imageCountEl.textContent = `${currentSlide + 1}/${slideCount}`;
                    }
                }, 3000);
            });
        }
        
        // 筛选约会
        function filterDates(category) {
            document.querySelectorAll('.date-item').forEach(item => {
                if (category === 'all' || item.getAttribute('data-category') === category) {
                    item.style.display = '';
                } else {
                    item.style.display = 'none';
                }
            });
            
            // 检查是否有可见项目
            checkEmptyState();
        }
        
        // 搜索约会
        function searchDates(term) {
            if (!term) {
                // 如果搜索词为空，显示所有项目（保持当前筛选状态）
                document.querySelectorAll('.date-item').forEach(item => {
                    item.style.display = '';
                });
                checkEmptyState();
                return;
            }
            
            document.querySelectorAll('.date-item').forEach(item => {
                const title = item.querySelector('.date-title').textContent.toLowerCase();
                const tags = Array.from(item.querySelectorAll('.tag')).map(tag => tag.textContent.toLowerCase());
                
                if (title.includes(term) || tags.some(tag => tag.includes(term))) {
                    item.style.display = '';
                } else {
                    item.style.display = 'none';
                }
            });
            
            // 检查是否有可见项目
            checkEmptyState();
        }
        
        // 检查空状态
        function checkEmptyState() {
            const activeList = document.querySelector('.date-list.active');
            const visibleItems = activeList.querySelectorAll('.date-item:not([style*="display: none"])');
            let emptyState = activeList.querySelector('.empty-state');
            
            if (visibleItems.length === 0) {
                if (!emptyState) {
                    emptyState = document.createElement('div');
                    emptyState.className = 'empty-state';
                    emptyState.innerHTML = `
                        <i class="fas fa-calendar-times"></i>
                        <div>没有找到符合条件的约会</div>
                        <div style="margin-top: 8px; font-size: 0.85rem;">尝试调整筛选条件或搜索词</div>
                    `;
                    activeList.appendChild(emptyState);
                }
            } else if (emptyState) {
                emptyState.remove();
            }
        }
        
        // 打开图片查看器
        function openImageViewer(e) {
            e.stopPropagation();
            
            // 确定点击的是哪个约会的图片
            const dateItem = this.closest('.date-item');
            const category = dateItem.getAttribute('data-category');
            
            // 设置当前图片集
            currentImageSet = dateImages[category] || [];
            
            // 如果没有图片数据，不打开查看器
            if (currentImageSet.length === 0) return;
            
            // 确定当前图片索引
            if (this.tagName === 'IMG') {
                // 单张图片点击
                const imgSrc = this.src;
                currentImageIndex = currentImageSet.findIndex(img => img.includes(imgSrc.split('/').pop().split('?')[0]));
            } else {
                // 图片容器点击，默认显示第一张
                currentImageIndex = 0;
            }
            
            // 显示模态框和图片
            modalImage.src = currentImageSet[currentImageIndex];
            imageModal.classList.add('show');
            document.body.style.overflow = 'hidden';
        }
        
        // 关闭图片查看器
        function closeImageViewer() {
            imageModal.classList.remove('show');
            document.body.style.overflow = 'auto';
        }
        
        // 显示上一张图片
        function showPrevImage() {
            currentImageIndex = (currentImageIndex - 1 + currentImageSet.length) % currentImageSet.length;
            modalImage.src = currentImageSet[currentImageIndex];
        }
        
        // 显示下一张图片
        function showNextImage() {
            currentImageIndex = (currentImageIndex + 1) % currentImageSet.length;
            modalImage.src = currentImageSet[currentImageIndex];
        }
        
        // 显示提示消息
        function showToast(message) {
            toastMessage.textContent = message;
            toastMessage.classList.add('show');
            setTimeout(() => {
                toastMessage.classList.remove('show');
            }, 2000);
        }
        
        // 防抖函数
        function debounce(func, wait) {
            let timeout;
            return function() {
                const context = this;
                const args = arguments;
                clearTimeout(timeout);
                timeout = setTimeout(() => func.apply(context, args), wait);
            };
        }
        
        // 初始化页面
        document.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>
